<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
</head>
<body>
<div id="app">
<el-select v-model="value" placeholder="请选择">
	<el-option-group v-for="group in options" :key="group.label" :label="group.label">
		<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
		</el-option>
	</el-option-group>
</el-select>
</div>
<script>
new Vue({
	el: "#app",
	data: {
		options: [{
			label: '热门城市',
			options: [{
				value: 'Shanghai',
				label: '上海'
			}, {
				value: 'Beijing',
				label: '北京'
			}]
		}, {
			label: '城市名',
			options: [{
				value: 'Chengdu',
				label: '成都'
			}, {
				value: 'Shenzhen',
				label: '深圳'
			}, {
				value: 'Guangzhou',
				label: '广州'
			}, {
				value: 'Dalian',
				label: '大连'
			}]
		}],
		value: ''
	}
})
</script>
</body>
</html>
